<!--
 * @Author: your name
 * @Date: 2021-05-11 13:27:43
 * @LastEditTime: 2021-05-17 15:04:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat-c/components/xjx-search/xjx-search.vue
-->
<template>
  <view class="xjx-search">
    <view class="search-content"
          @touchmove.stop.prevent>
      <template v-if="name">
        <view class="search-flex">
          <view class="search-input"
                @touchstart="goSearch">
            <view class="icon">
              <icon type="search"
                    size="16" />
            </view>
            <view v-if="name === 'course'"
                  :class="['search-text line-clamp-1', !searchValue? 'empty': '']">{{searchValue ? searchValue : '请输入搜索关键字'}}</view>
            <view v-else-if="name === 'activity'"
                  :class="['search-text line-clamp-1', !activityValue? 'empty': '']">{{activityValue ? activityValue : '请输入搜索关键字'}}</view>
            <view v-else-if="name === 'club'"
                  :class="['search-text line-clamp-1', !clubValue? 'empty': '']">{{clubValue ? clubValue : '请输入搜索关键字'}}</view>
            <view v-else-if="name === 'coach'"
                  :class="['search-text line-clamp-1', !coachValue? 'empty': '']">{{coachValue ? coachValue : '请搜索教练名称'}}</view>
          </view>
          <view v-if="(name === 'course' && searchValue) || (name === 'activity' && activityValue) || (name === 'club' && clubValue) || (name === 'coach' && coachValue)"
                class="cancel"
                @click="pageCancel">取消</view>
        </view>
      </template>
      <template v-if="page">
        <!-- 课程 -->
        <van-search v-if="page === 'course'"
                    :value="searchValue"
                    placeholder="请输入搜索关键词"
                    focus
                    shape="round"
                    use-action-slot
                    use-left-icon-slot
                    maxlength="50"
                    @change="onChange"
                    @search="onSearch">
          <view slot="left-icon"
                class="icon">
            <icon type="search"
                  size="16" />
          </view>
          <view slot="action"
                @click="onSearch">搜索</view>
        </van-search>
        <!-- 活动 -->
        <van-search v-else-if="page === 'activity'"
                    :value="activityValue"
                    placeholder="请输入搜索关键词"
                    focus
                    shape="round"
                    use-action-slot
                    use-left-icon-slot
                    maxlength="50"
                    @change="onChange"
                    @search="onSearch">
          <view slot="left-icon"
                class="icon">
            <icon type="search"
                  size="16" />
          </view>
          <view slot="action"
                @click="onSearch">搜索</view>
        </van-search>
        <!-- 俱乐部 -->
        <van-search v-else-if="page === 'club'"
                    :value="clubValue"
                    placeholder="请输入搜索关键词"
                    focus
                    shape="round"
                    use-action-slot
                    use-left-icon-slot
                    maxlength="50"
                    @change="onChange"
                    @search="onSearch">
          <view slot="left-icon"
                class="icon">
            <icon type="search"
                  size="16" />
          </view>
          <view slot="action"
                @click="onSearch">搜索</view>
        </van-search>
        <!-- 教练 -->
        <van-search v-else-if="page === 'coach'"
                    :value="coachValue"
                    placeholder="请搜索教练名称"
                    focus
                    shape="round"
                    use-action-slot
                    use-left-icon-slot
                    maxlength="50"
                    @change="onChange"
                    @search="onSearch">
          <view slot="left-icon"
                class="icon">
            <icon type="search"
                  size="16" />
          </view>
          <view slot="action"
                @click="onSearch">搜索</view>
        </van-search>
      </template>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  // name 列表页面传入参数 course 课程 activity 活动 club 俱乐部
  props: ['name', 'page'],
  data() {
    return {
      value: '',
      // 值是否改变
      changeValFlag: false
    };
  },
  created() {},
  computed: {
    ...mapState(['searchValue', 'activityValue', 'clubValue', 'coachValue'])
  },
  methods: {
    ...mapMutations(['setStateAttr']),
    onSearch() {
      const currentVal =
        this.page === 'course'
          ? this.searchValue
            : this.page === 'activity'
              ? this.activityValue
                : this.page === 'coach'
                  ? this.coachValue
                    : this.clubValue
      const val = this.changeValFlag ? this.value : currentVal;
      this.$emit('searchInfo', val);
    },
    // 列表页跳转
    goSearch() {
      if (this.name) {
        uni.navigateTo({
          url: `/pages/searchPage/searchPage?from=${this.name}`
        });
      }
    },
    // 列表页取消
    pageCancel() {
      if (this.name === 'course') {
        this.setStateAttr([
          {
            key: 'searchValue',
            val: ''
          }
        ]);
      } else if (this.name === 'activity') {
        this.setStateAttr([
          {
            key: 'activityValue',
            val: ''
          }
        ]);
      } else if (this.name === 'club') {
        this.setStateAttr([
          {
            key: 'clubValue',
            val: ''
          }
        ]);
      }else if (this.name === 'coach') {
        this.setStateAttr([
          {
            key: 'coachValue',
            val: ''
          }
        ]);
      }
      this.$emit('searchCancel');
    },
    onChange(e) {
      if (!this.changeValFlag) {
        this.changeValFlag = true;
      }
      this.value = e.detail;
    }
  }
};
</script>

<style lang="scss" scoped>
.xjx-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  background: #fff;
  z-index: 2;
  .search-content {
    height: 68rpx;
    width: 100%;
  }
}
.search-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search-input {
    display: flex;
    align-items: center;
    flex: 1;
    height: 68rpx;
    background: #f4f4f4;
    border-radius: 34rpx;
    font-size: 14px;
    .icon {
      display: flex;
      margin: 0 10rpx 0 30rpx;
    }
    .search-text {
      color: #333;
      font-size: 14px;
    }
    .empty {
      color: #ccc;
    }
  }
  .cancel {
    font-size: 14px;
    margin-left: 30rpx;
    color: #2e87ff;
  }
}
.icon {
  display: flex;
  align-items: center;
  margin: 0 10rpx 0 30rpx;
}
</style>